<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="close"
    cancelText="关闭"
  >
    <template slot="footer">
      <a-button type="primary" style="padding-left: 8px; padding-right: 8px" @click="clearModel"> 清除条件 </a-button>
      <a-button style="padding-left: 8px; padding-right: 8px" @click="close"> 关闭</a-button>
      <a-button type="primary" style="padding-left: 8px; padding-right: 8px" @click="handleOk"> 确定</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <div style="margin: 0 auto" :class="{ isCheck: isCheck }">
        <table class="table table-striped table-bordered" align="center" valign="center">
          <tr>
            <td class="column" colspan="1">账套/核算单元</td>
            <td class="value" colspan="3">
              <a-input @click.native="openOrganModel" v-model="model.accName" readOnly placeholder="请选择机构" />
            </td>
          </tr>
          <tr>
            <td class="column">开始日期</td>
            <td class="value">
              <j-date style="width: 100%" v-model="model.startTime"></j-date>
            </td>
            <td class="column">凭证摘要</td>
            <td class="value">
              <a-input v-model="model.summaryContent" placeholder="请输入凭证摘要" />
            </td>
          </tr>
          <tr>
            <td class="column">截止日期</td>
            <td class="value">
              <j-date style="width: 100%" v-model="model.endTime"></j-date>
            </td>
            <td class="column">科目名称</td>
            <td class="value">
              <a-input v-model="model.subjectName" placeholder="请输入科目名称" />
            </td>
          </tr>

          <tr>
            <td class="column">凭证编号</td>
            <td class="value">
              <a-input v-model="model.docCode" placeholder="请输入凭证编号" />
            </td>
            <td class="column">科目编号</td>
            <td class="value">
              <a-tree-select
                v-model="model.subjectCode"
                tree-data-simple-mode
                style="width: 317px"
                show-search
                treeNodeFilterProp="title"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                placeholder="请选择科目编号"
                :tree-data="subjectTreeData"
                allow-clear
                @select="onSelectSubjectRadio"
              />
            </td>
          </tr>
          <tr>
            <td class="column">记账人</td>
            <td class="value">
              <a-input v-model="model.tallier" placeholder="请输入记账人" />
            </td>
            <td class="column">借方金额(起)</td>
            <td class="value">
              <a-input v-model="model.debitStartAmount" placeholder="请输入借方金额(起)" />
            </td>
          </tr>
          <tr>
            <td class="column">记账状态</td>
            <td class="value">
              <j-dict-select-tag
                style="width: 100%"
                v-model="model.isTallied"
                placeholder="请选择记账状态"
                dict-code="zxzy_account_type"
              />
            </td>
            <td class="column">借方金额(止)</td>
            <td class="value">
              <a-input v-model="model.debitEndAmount" placeholder="请输入借方金额(止)" />
            </td>
          </tr>
          <tr>
            <td class="column">制证人</td>
            <td class="value">
              <a-input v-model="model.preparer" placeholder="请输入制证人" />
            </td>
            <td class="column">货方金额(起)</td>
            <td class="value">
              <a-input v-model="model.crediStartAmount" placeholder="请输入货方金额(起)" />
            </td>
          </tr>
          <tr>
            <td class="column">审核人</td>
            <td class="value">
              <a-input v-model="model.auditor" placeholder="请输入审核人" />
            </td>
            <td class="column">货方金额(止)</td>
            <td class="value">
              <a-input v-model="model.crediEndAmount" placeholder="请输入货方金额(止)" />
            </td>
          </tr>
          <tr>
            <td class="column">凭证类别</td>
            <td class="value">
              <a-select style="width: 100%" v-model="model.docType" placeholder="请选择凭证类别">
                <a-select-option :value="undefined">请选择</a-select-option>
                <a-select-option v-for="(item, index) in docTreeData" :key="index" :value="item.docCode">
                  {{ item.docName }}</a-select-option
                >
              </a-select>
            </td>
            <td class="column">单据编号</td>
            <td class="value">
              <a-input v-model="model.billCode" placeholder="请输入单据编号" />
            </td>
          </tr>
        </table>
      </div>
    </a-spin>

    <CheckOrganModal ref="departModal" @ok="updateQueryParam"></CheckOrganModal>
  </a-modal>
</template>

<script>
import CheckOrganModal from '../testcomponent/CheckOrganModal.vue'
import { SearchModalMixin } from '../mixins/SearchModalMixin'
import moment from 'moment'
export default {
  name: 'SearchModel',
  mixins: [SearchModalMixin],
  components: {
    CheckOrganModal,
  },
  data() {
    return {
      title: '查询条件',
      visible: false,
      model: {
        accCode: '',
        accName: '',
        startTime: moment().format('YYYY-01-01'),
        endTime: moment().format('YYYY-12-31'),
        unitId: '',
        summaryContent: '',
        subjectName: '',
        docCode: '',
        subjectCode: undefined,
        tallier: '',
        debitStartAmount: '',
        isTallied: '',
        debitEndAmount: '',
        preparer: '',
        crediStartAmount: '',
        auditor: '',
        crediEndAmount: '',
        docType: undefined,
        billCode: '',
      },
      subjectTreeData: [],
      docTreeData: [],
      isCheck: false,
      confirmLoading: false,
      url: {
        subjectTree: '/sjyzzx/sjZxzyAccountSubject/queryAllSubjectTree',
        docTree: '/sjyzzx/sjZxzyAccountVouche/queryAccountVoucheType',
      },
    }
  },
  created() {
    this.getSubjectTree()
    this.getDocTree()
  },
  watch: {
    $route: {
      handler: function (to) {
        if (Object.keys(to.params).length && to.params.from == 'sjxmss') {
          debugger
          this.edit()
          let { accName, accId, unitId } = to.params

          let { endDate, startDate } = JSON.parse(to.params.returnRecord)
          this.model.startTime = startDate
          this.model.endTime = endDate

          this.model.accName = accName
          this.model.accCode = accId
          this.model.unitId = unitId
        }
      },
      immediate: true,
    },
  },
  methods: {
    openOrganModel() {
      this.$refs.departModal.edit()
    },
    handleOk() {
      let { startTime, endTime } = this.model
      if (this.compareTime(startTime, endTime)) {
        this.$emit('ok', this.model)
        this.visible = false
      }
    },
  },
}
</script>
<style scoped>
.ant-select-dropdown {
  width: 317px;
}
</style>
<style lang="less" scoped>
@import '../../../css/checkAndEditNoBorder.less';

.table-bordered /deep/ .ant-col-sm-16 {
  width: 100%;
}
</style>